<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 
        1. 引入 需要的依赖库
        2. 如果本地有下载依赖库也可以引入
     -->
     <!-- 引入的是网上依赖库 -->
     <script src="https://cn.vuejs.org/js/vue.js"></script>

     <!-- 引入本地下载依赖库 -->
     <script src="/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <!-- 三种方式 -->
        
       <!--  <button onclick="clickFucn()">点击弹出一个笑脸</button> -->

        <!-- <button id="btn">点击更换文字</button>
        <p id="dome"></p> -->

        <button v-on:click="title">点击出现一张图片！</button>
        <img v-bind:src="tupiao" v-bind:alt="xxx" id="img"
        v-bind:title="xqx"
        >
    </div>
</body>
<script>
    let vu = new Vue({
        el:".app",
        data:{
            xxx:"222",
            tupiao:"ok",  //没有效果
            xqx:"111"
        },
        methods:{
            title:function(){
                 // 修改 图片 src 地址
                 this.tupiao="https://tse4-mm.cn.bing.net/th/id/OIP.btix_XPBpk52ig3msVQxFAHaNK?w=168&h=300&c=7&o=5&pid=1.7"
                // document.getElementById("img").setAttribute("src",
                // "http://img3.cache.netease.com/photo/0026/2016-09-22/C1J71ODR3ONH0026.jpg")
            }
        }
    })





   /*  function clickFucn(){
            alert("☺");
    } */

   /*  document.getElementById("btn").addEventListener("click",function(){
        //document.getElementById("dome").innerHTML="你个憨憨！";  //点击出现一段文字
        btn.innerText= "你个憨憨!";
    }) */
</script>
</html>